<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
    name: "AddAnimateMark.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;
            MapboxCommonService.setCZBP(map, [0, 0], 2)

            let marker = new mapboxgl.Marker();
            const animateMarker = (timestamp) => {
                let radius = 20;

                // Update the data to a new position based on the animation timestamp. The
                // divisor in the expression `timestamp / 1000` controls the animation speed.
                marker.setLngLat([
                    Math.cos(timestamp / 1000) * radius,
                    Math.sin(timestamp / 1000) * radius
                ]);

                // Ensure it's added to the map. This is safe to call if it's already added.
                marker.addTo(map);

                // Request the next frame of the animation.
                requestAnimationFrame(animateMarker);
            }

            // Start the animation.
            requestAnimationFrame(animateMarker);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>